<template>
    <div class="sidebar">
        <div class="user-avator">
            <img src="../../assets/img/img.jpg" />
        </div>
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            background-color="#324157"
            text-color="#fff"
            unique-opened
            @select="handleSelect"
        >
            <template v-for="item in items">
                <el-menu-item
                 :index="item.index"
                 :key="item.index"
                 @click="routeTo(item)"
                 >
                    <span slot="title">{{ item.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
import bus from '../common/bus';
export default {
    data() {
        return {
            onRoutes:'',
            collapse: false,
            items: [
                {
                    index: 'dashboard',
                    title: '首页'
                },
                {
                    index: 'user',
                    title: '用户管理',
                    subs: [
                        {
                            index: 'userList',
                            title: '用户列表'
                        }
                    ]
                },
                {
                    index: 'merchant',
                    title: '商户管理',
                    subs:[
                        {
                            index: 'merchantSetting',
                            title: '商户管理'
                        },
                        {
                            index: 'merchantSort',
                            title: '商户排名'
                        }
                    ]
                },
                {
                    index: 'serve',
                    title: '服务管理',
                    subs:[
                        {
                            index: 'serveSetting',
                            title: '服务管理'
                        },
                        {
                            index: 'serveCategory',
                            title: '服务类别'
                        }
                    ]
                },
                {
                    index: 'order',
                    title: '订单管理',
                    subs:[
                        {
                            index: 'car',
                            title: '洗车订单'
                        },
                        {
                            
                            index: 'service',
                            title: '维修订单'
                        },
                        {
                            index: 'maintain',
                            title: '保养订单'
                        },
                        {
                            index: 'evaluateSetting',
                            title: '评价管理'
                        }
                    ]
                },
                {
                    index: 'rescue',
                    title: '救援任务',
                    subs: [
                        {
                            index: 'rescueTask',
                            title: '救援任务'
                        }
                    ]
                },
                {
                    index: 'message',
                    title: '信息发布',
                    subs:[
                        {
                            index: 'publish',
                            title: '信息发布'
                        },
                        {
                            
                            index: 'waitAudit',
                            title: '待审核'
                        },
                        {
                            index: 'audited',
                            title: '已审核'
                        }
                    ]
                },
                {
                    index: 'statistics',
                    title: '订单统计',
                    subs: [
                        {
                            index: 'statisticsOrder',
                            title: '订单统计'
                        }
                    ]
                }
            ]
        };
    },
    methods:{
        handleSelect(index){
            let tempobj = this.items.find((item)=>{
                return item.index === index;
            })
            bus.$emit('changeTitle',tempobj.title);
            bus.$emit('changeCollapse');
        },
        routeTo(item){
            this.onRoutes = item.index;
            this.$router.push({
                name:item.index,
                params:{
                    subs:JSON.stringify(item.subs)
                }
            })
        }
    }
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 150px;
}
.sidebar > ul {
    height: 100%;
}
.user-avator {
    background-color: #324157;
    padding: 20px 0;
}
.user-avator img {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: 40px;
}
  .el-menu-item.is-active{
     background-color: #4F6A8C !important;
     color: #fff;
  }
</style>
